<!doctype html>
<html lang="en">
<head>
	<title>lil-gui - Basic Example</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
	<script type="module">

		import GUI from '../../dist/lil-gui.esm.js';
		const gui = new GUI();

		const folder = gui.addFolder( 'Folder' );

		const folderParams = {
			number: 0.5,
			boolean: false,
			color: '#0cf',
			function() { console.log( 'hi' ) }
		};

		folder.add( folderParams, 'number', 0, 1 );
		folder.add( folderParams, 'boolean' );
		folder.addColor( folderParams, 'color' );
		folder.add( folderParams, 'function' );

		const params = {
			options: 10,
			options2: "1",
			optionsAndBtn: 10,
			boolean: true,
			string: 'lil-gui',
			number: 0,
			color: '#aa00ff',
			function() { console.log( 'hi' ) },
			picObj:{
				controllerType:1,   //1 表示图片
				enable:true,
				imageUrl:"http://www.webgl3d.cn/img/logo.png",
				click:function(controller,obj){
					console.log(controller,obj,this) ;
					alert("点击上传图片") ;
				},
				btnTxt:'配置',
				btnClick:function(controller,obj){
					console.log(controller,obj,this) ;
					alert("按钮点击") ;
				},
				numberObj:{
					value:1,
					tooltip:"数字控件提示",
					onChange:function(value,value2,input,controller){
						console.log("数字改变：",value,value2,input,controller) ;
					}
				}
			},
			vector:{x:0,y:0,z:0},
			textarea:'',
			booleanMore:{
				flag1:true,
				flag1_label:"接收",
				flag2:false,
				flag2_label:"多选2",
				flag3:false,
				flag3_label:"多选3",
				flag4:false,
				flag4_label:"多选4"
			},
			label:"文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本"
		};

		gui.add( params, 'options', { Small: 1, Medium: 10, Large: 100 } );
		let selectController = gui.addSelect( params, 'options', { Small: 1, Medium: 10, Large: 100 },{editable:true})
				.widthUnset().setStyle("min-width:100px");
		selectController.updateOptions({ Small1: 1, Medium1: 10, Large1: 100 }) ;
		gui.addRadio( params, 'options2', { Small: "1", Medium: "10", Large1111112: "100" } ).name("单选").onChange( value => {
			console.log('onChange',value) ;
		}).disable(true);
		gui.addSelect( params, 'optionsAndBtn', { Small: 1, Medium: 10, Large: 100 }, {
			btnEnable:true,
			btnTxt:"刷新",
			btnClick:function(value,controller,object){
				console.log("刷新",value,controller,object) ;
				//重新设置option数据
				controller.updateOptions({ Small1: 1, Medium1: 10, Large1: 100 }) ;
			}
		});
		gui.add( params, 'boolean' );
		gui.add( params, 'string' ).nameTip();
		gui.add( params, 'number' );
		gui.addColor( params, 'color' );
		gui.add( params, 'function' ).name( 'Custom Name' );
		gui.add( params, 'picObj' ).onChange(function( params ) {
			console.log(params) ;
		}).name("贴图");

		gui.addVector(params,'vector','x,y,z').name("位置").onChange(value => {
			console.log(value);
		}) ;

		folder.addBoolean(params,'booleanMore','flag1,flag2,flag3,flag4').name("多选").onChange((value,controller,key) => {
			console.log(value,controller,key);
		}) ;

		gui.addTextArea(params,"textarea") ;

		gui.addLabel(params,"label") ;

		const params2 = {
			test:{
				usePages:true
			},
			usePages:"false"
		}
		gui.addBoolean(params2,"test",'usePages',{rowController:null}).name("").onChange((value,controller,key) => {
			console.log("=--",value,controller,key) ;
		}) ;
		gui.addBoolean(params2,null,'usePages').name("").onChange((value,controller,key) => {
			console.log("=--",value,controller,key) ;
		}) ;

	</script>
</body>
</html>
